<template>
    <div class="content-main" v-if="showDescriptionFlag == 3">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/student/index' }">实训案例</el-breadcrumb-item>
                <el-breadcrumb-item>{{projectBreadCrumbBack}} - 案例简介</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- <bread-crumb-back></bread-crumb-back> -->
        </div>
        <div class="content-box">
            <div class="production-tab">
                <ul>
                    <li :class="{ active: productionTabActiveIndex == 1}" @click="productionTab(1)">
                        <span>业务说明</span>
                    </li>
                    <li :class="{ active: productionTabActiveIndex == 2}" @click="productionTab(2)">
                        <span>数据及技术</span>
                    </li>
                    <li :class="{ active: productionTabActiveIndex == 3}" @click="productionTab(3)">
                        <span>案例设计</span>
                    </li>
                    <li :class="{ active: productionTabActiveIndex == 4}" @click="productionTab(4)">
                        <span>分工及结果展示</span>
                    </li>
                </ul>
            </div>
            <div class="production-content" v-show="productionTabActiveIndex == 1 && businessDescriptionEditorContent != ''" style="margin-top: 30px;">
                <div v-if="!noDataFlag && businessDescriptionEditorContent != ''" class="business-description-editor-content w-e-text" style="height: 800px; margin-top:30px; border:none;"></div>
                <div class="production-content-tip" style="text-align:center;" v-else>
                    <img style="margin-top: 5%;" src="./../../assets/images/project_tips3.jpg" />
                </div>
            </div>
            <div class="production-content" v-show="productionTabActiveIndex == 2" style="margin-top: 10px;">
                <div class="production-content-tip" style="text-align:center;" v-if="noDataFlag">
                    <img style="margin-top: 5%;" src="./../../assets/images/project_tips3.jpg" />
                </div>
                <div class="content-title" v-if="dataSourceList.length > 0  && !noDataFlag">
                    <i class="iconfont icon-shujuyuan"></i>数据样例
                </div>
                <div class="production-project-data" v-if="dataSourceList.length > 0  && !noDataFlag">
                    <div class="production-project-data-list">
                        <ul>
                            <li v-for="(item, index) in dataSourceList" :key="index">
                                <div class="list-title">
                                    <span class="title-arrow-right">
                                        <i class="iconfont icon-data"></i>
                                    </span>
                                    <span class="title-name" :title="item.name">{{ item.name }}</span>
                                </div>
                                <div class="list-content">
                                    <span>数据来源</span>
                                    <div class="list-content-box">
                                        <p>{{ item.source }}</p>
                                    </div>
                                    <div class="look-project" @click="lookProject(item.sampleList)">查看数据样例</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="content-title" v-if="dataSelectionEtiorContent != ''   && !noDataFlag">
                    <i class="iconfont icon-shuju"></i>技术选型
                </div>
                <div v-if="dataSelectionEtiorContent != ''   && !noDataFlag" class="data-selection-etior-content w-e-text" style="margin-top:30px; border:none;"></div>
                <div class="content-title" v-if="structureUrl != ''">
                    <i class="iconfont icon-liuchengsheji"></i>技术结构图
                </div>
                <div class="technology-upload-box" v-if="structureUrl != ''   && !noDataFlag">
                    <div class="upload-show" @click="openBox(structureUrl)">
                        <img v-if="structureUrl != ''" :src="structureUrl" />
                    </div>
                </div>
                <div class="content-title" v-if="(appUrl != '' || application.length > 0) && !noDataFlag">
                    <i class="iconfont icon-jishuzhichi"></i>技术应用
                </div>
                <div class="production-project-application" v-if="application.length > 0 && !noDataFlag">
                    <div class="production-project-application-list" v-for="(item, index) in application">
                        <div class="list-name">{{ item.name }}</div>
                        <div class="list-content">
                            <div class="list--step-content">
                                <div class="list-flow">
                                    <div class="list-flow-item" v-for="(item2, index2) in item.skillStrList">
                                        <span :title="item2">{{ item2 }}</span>
                                    </div>
                                </div>
                                <div class="list-step">
                                    <div class="list-flow-item" v-for="(item2, index2) in item.skillStrList">
                                        <span class="item-line"></span>
                                        <span class="item-point"></span>
                                        <span class="item-line" v-if="index2 == (item.skillStrList.length-1)"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="technology-upload-box" v-if="appUrl != '' && !noDataFlag">
                    <div class="upload-show" @click="openBox(appUrl)">
                        <img v-if="appUrl != ''" :src="appUrl" />
                    </div>
                </div>
            </div>
            <div class="production-content" v-show="productionTabActiveIndex == 3" style="margin-top: 10px;">
                <div class="production-content-tip" style="text-align:center;" v-if="noDataFlag">
                    <img style="margin-top: 5%;" src="./../../assets/images/project_tips3.jpg" />
                </div>
                <div class="content-title" v-if="modelIntroductionrContent != '' && !noDataFlag">
                    <i class="iconfont icon-shuju"></i>模型介绍
                </div>
                <div v-if="modelIntroductionrContent != '' && !noDataFlag" class="model-introductionr-content w-e-text" style="border:none;"></div>
                <div class="content-title" v-if="skillList.length > 0 && !noDataFlag">
                    <i class="iconfont icon-liuchengsheji"></i>功能模块
                </div>
                <div class="production-project-flow" v-if="skillList.length > 0 && !noDataFlag">
                    <div class="production-project-flow-content">
                        <div class="production-project-flow-box" :style="{  minWidth: (skillList.length * 220) + 'px'}">
                            <div class="production-project-flow-step-box">
                                <div class="step-item" v-for="(item, index) in skillList">
                                    <span>{{ item }}</span>
                                </div>
                            </div>
                            <div class="production-project-flow-step">
                                <div class="step-item" v-for="(item, index) in skillList">
                                    <span class="item-point"></span>
                                    <span class="item-line" v-if="index != (skillList.length -1)"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-title" v-if="flowDesignEtiorContent != '' && !noDataFlag">
                    <i class="iconfont icon-liuchengsheji"></i>流程设计
                </div>
                <div v-if="flowDesignEtiorContent != '' && !noDataFlag" class="flow-design-etior-content w-e-text" style="border:none;"></div>
            </div>
            <div class="production-content" v-show="productionTabActiveIndex == 4" style="margin-top: 10px;">
                <div class="production-content-tip" style="text-align:center;" v-if="noDataFlag">
                    <img style="margin-top: 5%;" src="./../../assets/images/project_tips3.jpg" />
                </div>
                <div class="content-title" v-if="characterDurationEtiorContent != '' && !noDataFlag">
                    <i class="iconfont icon-jiaose"></i>角色工期
                </div>
                <div v-if="characterDurationEtiorContent != ''  && !noDataFlag" class="character-duration-etior-content w-e-text" style="margin-top:30px; border:none;"></div>
                <div class="content-title" v-if="carouselImgList.length > 0  && !noDataFlag">
                    <i class="iconfont icon-zhanshi"></i>结果展示图
                </div>
                <div class="project-show" v-if="carouselImgList.length > 0  && !noDataFlag">
                    <!-- 放大图片 -->
                    <el-carousel indicator-position="outside" :autoplay="false" arrow="always">
                        <el-carousel-item v-for="(item, index) in carouselImgList" :key="index">
                            <img :src="item" />
                            <i class="iconfont icon-fangdajing" @click="openBox(item)"></i>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
            <big-img :close="closeBox" :imgsource="currentPic" v-if="lightBoxToggle"></big-img>
        </div>
        <div class="production-tip-btn" :class="{ 'tip-hide': productionTipStatus }">
            <div class="start-experiment-zoom" @click="startExperimentZomm">
                <img src="./../../assets/images/zoom_icon.png" />
            </div>
            <div class="start-experiment-btn" @click="startExperiment">开始实训</div>
        </div>
        <div class="start-experiment-zoom-btn" @click="startExperimentZomm" :class="{ 'tip-hide': productionTipStatus }">
            <img src="./../../assets/images/production-tip-btn2.png" />
        </div>
        <el-dialog
            class="data-project-dialog"
            title="数据样例"
            :visible.sync="dataProjectVisible"
            width="500px">
            <div class="project-dialog-content">
                <p v-for="(item, index) in projectList">{{ item }}</p>
            </div>
        </el-dialog>
    </div>
    <div class="content-main" v-else-if="showDescriptionFlag == 2"  style="height:100%;">
        <div class="project-tips-box">
            <img src="./../../assets/images/project_tips2.jpg" />
        </div>
        <div class="production-tip-btn" :class="{ 'tip-hide': productionTipStatus }">
            <div class="start-experiment-zoom" @click="startExperimentZomm">
                <img src="./../../assets/images/zoom_icon.png" />
            </div>
            <div class="start-experiment-btn" @click="startExperiment">开始实训</div>
        </div>
        <div class="start-experiment-zoom-btn" @click="startExperimentZomm" :class="{ 'tip-hide': productionTipStatus }">
            <img src="./../../assets/images/production-tip-btn2.png" />
        </div>
    </div>
</template>

<script>
    import BigImg from '@/components/BigImg.vue'
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    import vueWangeditor from '@/components/vueWangeditor.vue'
    import { mapState } from 'vuex'
    export default {
        components: {
            BigImg,
            BreadCrumbBack,
            vueWangeditor
        },
        data () {
            return {
                projectId: '',
                //面包屑name
                projectBreadCrumbBack: '',
                //tabindex
                productionTabActiveIndex: 1,
                showDescriptionFlag: '',
                carouselImgList: [],
                lightBoxToggle: false,
                currentPic: {
                    imgUrl: ''
                },
                //是否有数据
                noDataFlag: '',
                //结构图
                structureUrl: '',
                //应用图
                appUrl: '',
                //数据源
                dataSourceList: [],
                //流程展示
                skillList: [],
                //技术应用
                application: [],
                businessDescriptionEditorContent: '',
                dataSelectionEtiorContent: '',
                modelIntroductionrContent: '',
                flowDesignEtiorContent: '',
                characterDurationEtiorContent: '',
                //开始试验按钮状态
                productionTipStatus: true,
                //数据样例弹窗
                dataProjectVisible: false,
                projectList: []
            }
        },
        created () {

            this.projectId = JSON.parse(window.localStorage.getItem('teacher-project-id')).itemId
            this.showDescriptionFlag = this.$store.state.itemServiceValue.showDescriptionFlag
            this.projectBreadCrumbBack = this.$store.state.projectBreadCrumbBack
            if(this.showDescriptionFlag == 3){
                this.init() //初始化
            }
        },
        mounted () {
             this.$nextTick(() => {
                $('.w-e-text').css({'border':'none'})
            })
        },
        methods: {
            init(){
                let self = this
                self.$http.get('/dataplatform/description/detail?itemId='+self.projectId+'&descriptionType='+self.productionTabActiveIndex).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(self.productionTabActiveIndex == 1){
                            self.noDataFlag = res.data.noDataFlag

                            this.$nextTick(() => {
                                $('.business-description-editor-content').html(res.data.businessIntroduction)
                            })
                            self.businessDescriptionEditorContent = res.data.businessIntroduction
                            $('.w-e-text').css({'border':'none'})

                        }else if(self.productionTabActiveIndex == 2){
                            self.noDataFlag = res.data.noDataFlag

                            self.dataSourceList = res.data.dataSourceList
                            self.dataSelectionEtiorContent = res.data.technicalSelection
                            this.$nextTick(() => {
                                $('.data-selection-etior-content').html(res.data.technicalSelection)
                            })
                            for (let i = 0; i < res.data.skillList.length; i++) {
                                let skillListJson = {}
                                skillListJson.name = res.data.skillList[i].applicationStr
                                skillListJson.skillStrList = res.data.skillList[i].skillStrList
                                self.application.push(skillListJson)
                            }
                            self.structureUrl = res.data.technicalPicNameList[0].mappingFilePath
                            self.appUrl = res.data.technicalStructurePicNameList[0].mappingFilePath
                        }else if(self.productionTabActiveIndex == 3){
                            self.noDataFlag = res.data.noDataFlag

                            self.modelIntroductionrContent = res.data.modelIntroduction

                            for (let i = 0; i < res.data.stepList.length; i++) {
                                self.skillList.push(res.data.stepList[i].name)
                            }
                            self.flowDesignEtiorContent = res.data.designDescription

                            this.$nextTick(() => {
                                $('.model-introductionr-content').html(res.data.modelIntroduction)
                                $('.flow-design-etior-content').html(res.data.designDescription)
                            })

                        }else if(self.productionTabActiveIndex == 4){
                            self.noDataFlag = res.data.noDataFlag

                            self.characterDurationEtiorContent = res.data.roleTask
                            this.$nextTick(() => {
                                $('.character-duration-etior-content').html(res.data.roleTask)
                            })
                            for (let i = 0; i < res.data.resultDisplayPicNameList.length; i++) {
                                self.carouselImgList.push(res.data.resultDisplayPicNameList[i].mappingFilePath)
                            }
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            openBox: function(e) {
                this.currentPic.imgUrl = e
                this.lightBoxToggle = !this.lightBoxToggle;
            },
            closeBox: function() {
                this.lightBoxToggle = false;
            },
            //tab切换
            productionTab(value){
                let self = this
                this.productionTabActiveIndex = value
                $('.business-description-editor-content').html('')
                self.dataSourceList = []
                $('.data-selection-etior-content').html('')
                self.application = []
                self.structureUrl = ''
                self.appUrl = ''
                $('.model-introductionr-content').html('')
                self.skillList = []
                $('.flow-design-etior-content').html('')
                $('.character-duration-etior-content').html('')
                self.carouselImgList = []
                this.init()
            },
            //开始试验
            startExperiment(){
                let self = this
                self.$http.get('/dataplatform/chapter/getVmChapterData?itemId='+self.projectId+'&chapterType=2').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$store.commit('updateChapterType', res.data.chapterId)
                        self.$store.commit('updateItemServiceType', 1)
                        this.$store.commit('updateProjectType', 2)

                        // self.$router.push({
                        //     path: '/student/projectTrainingStep'
                        // })
                        //type = 1 为教学模式，type = 2 为练习模式
                          self.$router.push({
                            path: '/student/projectTrainingStep',
                            query:{type:2}
                        })
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //开始试验缩小
            startExperimentZomm(){
                if(this.productionTipStatus){
                    this.productionTipStatus = false
                }else{
                    this.productionTipStatus = true
                }
            },
            //查看案例
            lookProject(list){
                if(list.length == 0){
                    this.$message({
                        message: '暂无数据样例',
                        type: 'warning'
                    })
                    return
                }
                this.projectList = list
                this.dataProjectVisible = true
            }
        },
        computed:{
			...mapState(['itemServiceValue','chapterType','itemServiceType'])
		}
    }
</script>
